<!-- components/DeptManagement.vue -->
<template>
  <div class="dept-management">
    <a-space direction="vertical" :size="16" fill>
      <!-- 头部操作区 -->
      <a-card :bordered="false">
        <a-space>
          <h2>部门管理</h2>
          <a-button type="primary" @click="showAddModal">
            <template #icon>
              <icon-plus />
            </template>
            新增部门
          </a-button>
        </a-space>
      </a-card>

      <!-- 部门列表 -->
      <a-card :bordered="false">
        <a-table
            :loading="deptStore.loading"
            :data="deptStore.deptList"
            :pagination="false"
            row-key="id"
            :scroll="{ x: 1000 }"
        >
          <template #columns>
            <a-table-column title="部门名称" data-index="deptName" :width="150" fixed="left" />
            <a-table-column title="部门编码" data-index="deptCode" :width="120" />
            <a-table-column title="部门描述" data-index="deptDesc" :width="200" ellipsis />
            <a-table-column title="排序号" data-index="sort" :width="80" />
            <a-table-column title="创建时间" data-index="createTime" :width="160">
              <template #cell="{ record }">
                {{ formatDate(record.createTime) }}
              </template>
            </a-table-column>
            <a-table-column title="操作" :width="150" fixed="right">
              <template #cell="{ record }">
                <a-button type="text" size="small" @click="showEditModal(record)">
                  <template #icon>
                    <icon-edit />
                  </template>
                  编辑
                </a-button>
                <a-popconfirm
                    content="确定要删除该部门吗？"
                    @ok="handleDelete(record.id)"
                >
                  <a-button type="text" size="small" status="danger">
                    <template #icon>
                      <icon-delete />
                    </template>
                    删除
                  </a-button>
                </a-popconfirm>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </a-card>
    </a-space>

    <!-- 添加/编辑部门弹窗 -->
    <AddOrUpdate
        v-model:visible="deptStore.dialogVisible"
        :dept-data="deptStore.currentDept"
        @refresh="deptStore.fetchDepts"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useDeptStore } from '@/stores/dept'
import { Message } from '@arco-design/web-vue'
import AddOrUpdate from './AddOrUpdate.vue'

const deptStore = useDeptStore()

// 初始化加载部门列表
onMounted(() => {
  deptStore.fetchDepts()
})

// 显示添加模态框
const showAddModal = () => {
  deptStore.setCurrentDept(null)
  deptStore.showDialog('add')
}

// 显示编辑模态框
const showEditModal = (dept) => {
  deptStore.setCurrentDept(dept)
  deptStore.showDialog('edit')

}

// 删除部门
const handleDelete = async (id) => {
  try {
    await deptStore.deleteDept(id)
    Message.success('删除成功')
    deptStore.fetchDepts()
  } catch (error) {
    console.error('删除失败:', error)
    Message.error('删除失败')
  }
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  return new Date(dateString).toLocaleString()
}
</script>

<style scoped>
.dept-management {
  padding: 16px;
}

:deep(.arco-card) {
  border-radius: 4px;
}

:deep(.arco-table-cell) {
  padding: 12px 8px;
}
</style>